$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")



class getGoods{
    constructor(){
        this.cont = document.querySelector(".cont");
        this.url = "http://localhost:3000/api";
        this.pagbox= document.querySelector(".pagbox");

        // this.index = 0;
        // 1. 获取数据
        this.getData();
        this.addEvent();

    }
    addEvent(){
        const that=this;
        // 利用事件委托，绑定添加购物车的点击事件
        this.cont.addEventListener("click",function(eve){
            const e=eve||window.event;
            const target=e.target||e.srcElement;
            if(target.className === "add"){
                // console.log(target)
                // 2. 获取当前商品的id
                that.id = target.parentNode.parentNode.getAttribute("index")
                // that.allPrice=target.parentNode.previousSibling.children("money")
                console.log(that.id);
                // // 3. 将数据存到本地存储中
                that.setLocal();
            }
        })
    }
    setLocal(){
        const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
        console.log(goods)

        // 判断是否是第一次添加购物车
        if(goods.length < 1){
            // 第一次加入购物车：直接添加数据
            goods.push({
                id:this.id,
                num:1,
                // allPrice:allPrice
            })
        }else{
            // 不是第一次加入购物车：
            // 遍历
            let i = 0;
            const flag = goods.some((val,idx)=>{
                //some(function(val,idx,self))
                //参数1：数组中的数据  参数2：索引  (当前索引的值)  参数3：数组自身
                i = idx;
                return val.id === this.id
            })
            // 判断本次添加的是否是新商品
            if(flag){
                // 是老商品：增加指定商品的数量
                goods[i].num++;
            }else{
                // 不是老商品：增加数据
                goods.push({
                    id:this.id,
                    num:1,
                    // allPrice:allPrice
                })
            }
        }

        // 再存回去
        localStorage.setItem("goods", JSON.stringify(goods))
    }

    getData(){
        console.log(123)
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res => {
                // 2. 解析数据
                // console.log(res);
                this.res = JSON.parse(res);
                console.log(this.res);
                // console.log(this.res.length)

                    // 4. 渲染页面
                    this.render();

                    // 渲染页码
                    this.renderPage()

            }
        })
    }
    // renderPage(){
    //     console.log(this.res.length)
    //     this.pagbox.pagination(this.res.length, {
    //         items_per_page: this.num,
    //         current_page: this.index,
    //         // callback:(i)=>{
    //         //     this.index = i;
    //         //     // 3. 渲染页面
    //         //     // this.render()
    //         // }
    //     })
    // }

    renderPage(){
        $(".pagbox").pagination(80,{
            items_per_page:8,
            prev_text:"上一页",
            next_text:"下一页",
            callback:function(index){
                console.log(index)
            }
        })
    }
    render(){
        let str = "";
        this.res.forEach(val=>{
            // console.log(val)
            // console.log(val.title);
            // console.log(val.bigImg);
            // console.log(val.img1);
            // console.log(val.img2);
            // console.log(val.img3);
              
            str+=`
            <div class="box" index="${val.index}">

                <img src="${val.bigImg}" alt="">
                <span>${val.title}</span>

                <div class="pri">
                    <p class="money">￥${val.money}</p>
                    <p class="number">${val.number}</p>
                </div>

                <div class="hide">
                    <p class="add">查看详情</p>
                </div>

            
            </div>
            `
        })

        this.cont.innerHTML = str;
    }
}
new getGoods();